<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
    <meta name="apple-mobile-web-app-title" content="标题"> <!-- 添加到主屏后的标题（iOS 6 新增） -->
    <meta name="apple-mobile-web-app-capable" content="yes"><!-- 是否启用 WebApp 全屏模式 -->
    <meta name="apple-mobile-web-app-status-bar-style" content="white-translucent">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="stylesheet" href="../css/mui.css">
    <link rel="stylesheet" href="../css/mobile_reset.css">
    <link rel="stylesheet" href="../css/my_money.css">
    <title>我的资产</title>
    <script>
        (function () {
            document.addEventListener('DOMContentLoaded', function () {
                var html = document.documentElement;
                var windowWidth = html.clientWidth;
                html.style.fontSize = windowWidth / 7.5 + 'px';
                // 等价于html.style.fontSize = windowWidth / 750 * 100 + 'px';
            }, false);
        })();

        // 这个7.5就是根据设计稿的横向宽度来确定的，假如你的设计稿是640
        // 那么 html.style.fontSize = windowWidth / 6.4 + 'px';
    </script>
</head>
<body>
<div class="my_moneyBox">
    <div class="left my_money">
        <p class="one"><span class="span_active"><b>199999.00</b>元</span></p>
        <p class="two">可提现本金</p>
        <p class="three">待平台返还本金：<span  class="span_active"><b>150.00</b>元</span><span class="number span_active"> (10笔)</span></p>
    </div>
    <div class="left duobaobi">
        <p class="one"><span><b>5100</b>个</span></p>
        <p class="two"><b>夺宝币</b></p>
    </div>
    <p class="select"><img src="../images/sanjiao.png" alt=""></p>
</div>
<!--资金记录-->
<div class="fund_record">
    <h1>资金记录</h1>
    <div class="money_record">
    <div  class="fankuan_information">
        <div class="left">
            <p>试用返款</p>
            <p><span>2017-03-05 10:00:00</span></p>
        </div>
        <div class="right"><span>+200</span></div>
    </div>
    <div  class="benjin_information">
        <div class="left">
            <p>本金提现</p>
            <p><span>2017-03-05 10:00:00</span></p>
        </div>
        <div class="right"><span>+200</span></div>
    </div>
</div>
</div>
<!--夺宝币记录-->
<div class="duobaobi_record"  style="display:none;">
    <h1>夺宝币记录</h1>
    <div class="duobao_record">
        <div  class="fankuan_information">
            <div class="left">
                <p>回访任务奖励</p>
                <p><span>2017-03-05 10:00:00</span></p>
            </div>
            <div class="right"><span>+200</span></div>
        </div>
        <div  class="benjin_information">
            <div class="left">
                <p>兑换试用</p>
                <p><span>2017-03-05 10:00:00</span></p>
            </div>
            <div class="right"><span>+200</span></div>
        </div>
        <div  class="register_login">
            <div class="left">
                <p>注册登录</p>
                <p><span>2017-03-05 10:00:00</span></p>
            </div>
            <div class="right"><span>+200</span></div>
        </div>
    </div>
</div>

<!--资金记录-->
<div>

</div>
</body>
<script src="../js/jquery-1.10.2.js"></script>
<script src="../js/mui.js"></script>
<script>
    $(function(){
       $('.my_money').bind('tap',function(){
           $(this).find('span').addClass('span_active');
           $('.duobaobi').find('span').removeClass('span_active');
           $('.select').css('paddingLeft','2rem');
           $('.duobaobi_record').css('display','none')
           $('.fund_record').slideToggle();
       })
        $('.duobaobi').bind('tap',function(){
            $(this).find('span').addClass('span_active');
            $('.my_money').find('span').removeClass('span_active');
            $('.select').css('paddingLeft','5.8rem');
            $('.fund_record').css('display','none')
            $('.duobaobi_record').slideToggle();
        })
    })
</script>
</html>













